<template>
   <!-- <div class="box">
       <li v-for="(item,index) in tu"
       :class="{BeiJing:index==BianSe } "
       @click="Mey(index)"
       >
         <router-link :to="item.path" active-class="aa">
            <img :src="item.URL" alt="">
            {{item.type}}
         </router-link>
       </li>
   </div> -->

<van-tabbar v-model="active"
  active-color="#ee0a24"
   route
   >
  <van-tabbar-item to="/HomePage">
    <span>首页</span>
    <template #icon="props">
      <img :src="props.active ? icon.actives : icon.inactive" />
    </template>
  </van-tabbar-item>
   <van-tabbar-item to="/FenLei">
    <span>分类</span>
    <template #icon="search">
      <img :src="search.active ? icon.FenLei : icon.InFenLei " />
    </template>
  </van-tabbar-item>
   <van-tabbar-item to="/SuPin">
    <span>速拼</span>
    <template #icon="props">
      <img :src="props.active ? icon.SuPin : icon.InSuPin" />
    </template>
  </van-tabbar-item>

   <van-tabbar-item to="/HeHuo">
    <span>合伙</span>
    <template #icon="props">
      <img :src="props.active ? icon.HeHuo : icon.InHeHuo" />
    </template>
  </van-tabbar-item>

   <van-tabbar-item to="/WoDe">
    <span>我的</span>
    <template #icon="props">
      <img :src="props.active ? icon.WoDe : icon.InWoDe" />
    </template>
  </van-tabbar-item>
</van-tabbar>
</template>

<script>
import syTwo from"../assets/sy-2.png"
import syOne from"../assets/sy-1.png"

import flTwo from"../assets/fl-2.png"
import flOne from"../assets/fl-1.png"

import gwTwo from"../assets/gw-2.png"
import gwOne from"../assets/gw-1.png"

import hhTwo from"../assets/hh-2.png"
import hhOne from"../assets/hh-1.png"

import wdTwo from"../assets/wd-2.png"
import wdOne from"../assets/wd-1.png"
export default {
    name:"TabBar",
    data() {
    return {
      active: 0,
       icon: {
        actives: syTwo,
        inactive: syOne,
        FenLei:flTwo,
        InFenLei: flOne,
        SuPin: gwTwo,
        InSuPin: gwOne,
        HeHuo: hhTwo,
        InHeHuo: hhOne,
        WoDe: wdTwo,
        InWoDe: wdOne,
      },
     BianSe:false,
      //  tu:[{    
      //           path:'/',
      //           URL:'/src/assets/首页-选中.png',
      //           type:'首页'
      //       },
      //       {
      //           path:'/FenLei',
      //           URL:'/src/assets/分类.png',
      //           type:'分类'
      //       },{
      //           path:'/SuPin',
      //           URL:'/src/assets/速拼.png',
      //           type:'速拼'
      //       },{
      //         path:'/HeHuo',
      //           URL:'/src/assets/合伙.png',
      //           type:'合伙'
      //       },{
      //         path:'/WoDe',
      //           URL:'/src/assets/我的.png',
      //           type:'我的'
      //       },
      //       ],
       
    };
  },
  
  methods: {
    Mey(index){
      console.log(index);
      this.BianSe=index
    }
  },
}
</script>

<style lang="less" scoped>
  li{
    list-style: none;
  }
  .aa{
    color: red;
  }
  .BeiJing{
    background-color: rgb(180, 180, 180);
  }
.box{
    width: 100%;
    height: 3rem;
    text-align: center;
    font-size: 0.7rem;
    background: rgb(253, 253, 253);
    position:fixed;
    bottom: 0;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    box-sizing:border-box;
    img {
        margin: 0 0 0.2rem 0;
        display: block;
        width: 1.5rem;
        object-fit: cover;
      }
  }
</style>